<template>
    <view class="">
        <view class="pay-wrap">
            <view class="pay-infos">
                <view class="">待付款</view>
                <view class="">
                    <span class="symbol">￥</span>
                    <span>{{ payData.payAmount | toFixed(2) }}</span>
                </view>
            </view>
            <view class="pay-details">
                <view class="item">
                    <view class="">收款方</view>
                    <view class="">云游相册</view>
                </view>
                <view class="item">
                    <view class="">商品</view>
                    <view class="">摄影服务</view>
                </view>
                <view class="item">
                    <view class="">商品金额</view>
                    <view class="">¥{{ payData.saleAmount | toFixed(2) }}</view>
                </view>
                <view class="item">
                    <view class="">乐拍卡</view>
                    <view class="card-number" @click="showInput">
                        <input class="" disabled placeholder="若已购买云游乐拍卡，请输入券码" placeholder-style="color:#dfe1e3;" v-model="couponName" />
                    </view>
                </view>
                <view class="item" v-if="payData.saleAmount > payData.payAmount">
                    <view class="">优惠</view>
                    <view class="">
                        <span v-if="payData.discount > 0">-</span>
                        ¥{{ payData.discount | toFixed(2) }}
                    </view>
                </view>
            </view>
            <view class="btn" @click="surePay">确认支付￥{{ payData.payAmount | toFixed(2) }}</view>
        </view>
        <CouponCode class="CouponCode" v-if="isShowInput" @hideInput="hideInput" @updateCouponNumber="updateCouponNumber"></CouponCode>
    </view>
</template>
<script>
import CouponCode from './components/CouponCode.vue';
import { accAdd } from '@/common/utils.js';
import { commonMethods } from '@/mixins/commonMethods.js';
import { computeAmount, createOrder } from '@/api/order.js';
export default {
    name: 'pay',
    data() {
        return {
            couponName: '',
            couponNumber: '',
            isShowInput: false,
            payData: {
                saleAmount: 0,
                payAmount: 0,
                discount: 0
            },
            couponData: {},
            userid: ''
        };
    },
    mixins: [commonMethods],
    computed: {},
    mounted() {},
    created() {},
    onLoad(option) {
        if (option.payData) {
            this.payData = JSON.parse(option.payData);
        }
        if (option.couponData) {
            this.couponData = JSON.parse(option.couponData);
            this.couponName = this.couponData.name;
            this.couponNumber = this.couponData.coupon_number;
        }
        if (option.userid) {
            this.userid = option.userid;
        }
    },
    methods: {
        showInput() {
            this.isShowInput = true;
        },
        hideInput() {
            this.isShowInput = false;
        },
        updateCouponNumber(couponNumber) {
            let payParam = this.getPayParam(this.payData, this.userid, couponNumber.replace(/\s/gi, ''));
            this.computeAmount(payParam);
        },
        // 计算价格
        async computeAmount(param) {
            let res = await computeAmount(param);
            console.log(res);
            if (res && res.pay_amount >= 0 && res.name) {
                this.payData.payAmount = res.pay_amount;
                this.payData.discount = accAdd(param.sale_amount, -res.pay_amount);
                this.couponName = res.name;
                this.couponNumber = param.coupon_number || '';
                this.isShowInput = false;
                uni.$emit('updateCouponList');
            }
        },
        getPayParam(payData, userid, couponNumber) {
            return {
                sale_amount: payData.saleAmount,
                count: payData.hadSelectPicCount,
                ids: payData.ids,
                type: payData.type,
                userid: userid,
                coupon_number: couponNumber || ''
            };
        },
        // 去支付
        async surePay() {
            let res = await this.$uniPromise.showModal({
                title: '支付',
                content: '确认支付照片？'
            });
            if (res.confirm) {
                this.wxPay();
            } else if (res.cancel) {
                this.$showToast('取消支付');
            }
        },
        // 去微信支付
        async wxPay() {
            let payParam = this.getPayParam(this.payData, this.userid, this.couponNumber);
            payParam.pay_amount = this.payData.payAmount;
            let data = await createOrder(payParam);
            if (data) {
                if (data.pay_type === 0) {
                    this.paySuccess();
                } else {
                    let payInfo = data.wx_pay_info;
                    if (payInfo && payInfo.timeStamp) {
                        let requestPayment = await this.$uniPromise.requestPayment({
                            timeStamp: payInfo.timeStamp,
                            nonceStr: payInfo.nonceStr,
                            package: payInfo.package,
                            signType: payInfo.signType,
                            paySign: payInfo.paySign
                        });
                        if (requestPayment) {
                            this.paySuccess();
                        } else {
                            this.$showToast('付款失败');
                        }
                    } else {
                        this.$showToast('获取支付信息失败');
                    }
                }
            } else {
                this.$showToast('创建订单失败');
            }
        },
        paySuccess() {
            uni.switchTab({
                url: '/pages/tabBar/mine/mine',
                success: () => {
                    uni.navigateTo({
                        url: 'pages/minePages/cloudAlbum/cloudAlbum'
                    });
                }
            });
        }
    },
    components: { CouponCode }
};
</script>
<style lang="scss" scoped="scoped">
.pay-wrap {
    width: 100%;
    min-height: 100vh;
    background: #f6f8fc;
    .pay-infos {
        width: 750rpx;
        height: 250rpx;
        background-color: #06b588;
        padding: 60rpx 40rpx;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        color: #fff;
        font-size: 36rpx;
        .symbol {
            font-size: 28rpx;
        }
    }
    .pay-details {
        background-color: #ffffff;
        box-shadow: 0rpx 7rpx 58rpx 0rpx rgba(207, 207, 207, 0.75);
        border-radius: 17rpx;
        margin: -100rpx 30rpx 0rpx;
        padding: 40rpx;
        box-sizing: border-box;
        .item {
            display: flex;
            justify-content: space-between;
            padding-bottom: 40rpx;
            border-bottom: 1rpx solid #e9ebf3;
            font-size: 30rpx;
            line-height: 30rpx;
            margin-bottom: 40rpx;
            align-items: center;
            &:last-child {
                padding-bottom: 0;
                border-bottom: none;
                margin-bottom: 0;
            }
            view:first-child {
                color: #abb3b8;
            }
            .card-number {
                text-align: right;
                margin-right: 30rpx;
                position: relative;
                width: 490rpx;
                &::after {
                    position: absolute;
                    right: -20rpx;
                    top: 50%;
                    transform: translate(0, -50%);
                    content: '';
                    width: 16rpx;
                    height: 26rpx;
                    background-image: url(@/static/common/arrow.png);
                    background-size: cover;
                }
            }
        }
    }
    .btn {
        margin: 100rpx auto 0;
        width: 600rpx;
        height: 86rpx;
        background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
        border-radius: 10rpx;
        color: #ffffff;
        font-size: 30rpx;
        line-height: 86rpx;
        text-align: center;
    }
}
.CouponCode {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
</style>
